<template>
    <div>
        <div style="text-align: right;">
            <div>
                <el-form :inline="true" :model="search" class="demo-form-inline">
                    <el-form-item>
                        <el-input v-model="search.name" placeholder="请输入客户名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="doSearch" size="mini" icon="el-icon-search" class="light-blue-btn">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-table
            :data="list"
            stripe
            style="width: 100%">
            <el-table-column
                type="index"
                label="序号"
                width="180"
            >
            </el-table-column>
        
            <el-table-column
                prop="CUSTOMER_CODE"
                label="客户编号"
            >
            </el-table-column>  
            <el-table-column
                prop="CUSTOMER_NAME"
                label="客户简称"
            >
            </el-table-column>
            <el-table-column
                prop="CUSTOMER_FULL_NAME"
                label="客户名称"
            >
            </el-table-column>
        </el-table>
        <div class="block" style="margin-top:10px;display:flex;justify-content: flex-end;">
            <el-pagination
                @size-change="changePageSize"
                @current-change="goPage"
                :current-page="page"
                :page-sizes="[20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import customers from '@/api/setting/customers';

    export default {
        name: "Customers",
        data() {
            return {
                page: 1,
                pageSize: 20,
                lock: false,
                list: [],
                total: 0,
                search: {
                    name: ''
                }
            };
        },
        mounted() {
            this.getList();
        },
        methods: {
            async getList() {
                let res = await customers.getList({page: this.page, size: this.pageSize, name: this.search.name});
                this.list = res.data.list;
                this.total = res.data.total;
            },
            changePageSize(size) {
                this.pageSize = size;
                this.page = 1;
                this.getList();
            },
            goPage(page) {
                this.page = page;
                this.getList();
            },
            doSearch() {
                this.page = 1;
                this.getList();
            },
        }
    }
</script>